<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件类型</title>
    <style>
        .item {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div class="item">0</div>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <script>
        let items = document.querySelectorAll(".item");
        items[0].onclick = () => { console.log("点击事件") };
        items[1].onmousedown = () => { console.log("鼠标按下") };
        items[2].onmouseup = () => { console.log("鼠标抬起") };
        items[3].oncontextmenu = () => { console.log("鼠标右击") };
        items[4].ondblclick = () => { console.log("鼠标双击") };
        // items[5].onmousemove = () => { console.log("鼠标移动") };
        items[5].onmousemove = throttle(() => {
            console.log("鼠标移动");
        }, 200);
        // items[6].onwheel = () => { console.log("滚轮事件") };
        items[6].onwheel = throttle(() => {
            console.log("滚轮事件");
        }, 500)

        function throttle(cb, time) {
            let t;
            return () => {
                if (t) {
                    return;
                }
                t = setTimeout(() => {
                    cb();
                    t = null;
                }, time)
            }
        }
    </script>
</body>

</html>